<template>
    <div>
        <div class="course-no-head course-of-on-head">
            <img v-show="item.classType==='1'" class="zhongchou" src="../../assets/img/zhongchou.png" />
            <div class="course-div detail">
                <p class="course-title">
                    <span class="course-tag">{{item.gradeName}}</span>    
                    <span class="class-name">{{item.className}}</span><em class="season">({{item.periodName}})</em></p>
                <p class="course-mes">
                    <img src="../../assets/img/home/calendar.png" />
                    <span>{{item.startCourseTime | formatDate('MM月DD日')}}-{{item.endCourseTime | formatDate('MM月DD日')}}</span>
                </p>
                <p class="course-mes">
                    <img src="../../assets/img/home/clock.png" />
                    <span>{{item.timeInterval}}  {{item.studyingTime}}</span>
                </p>
                <p class="course-mes">
                    <template v-if="item.campusAddress">
                        <img src="../../assets/img/home/location.png" />
                        <span>{{item.campusAddress}}</span>
                        <span @click="handleLocation()" class="location-detail">
                            <!-- <img src="../../assets/img/location.png" /> -->
                                <span>详细地址</span>
                        </span>
                    </template>
                    <span class="course-sitiation">
                        {{(item.quota - item.regAmount)?(item.quota - item.regAmount)<10?'学位紧缺':'火热报名中':'学位已满'}}
                    </span>
                </p>
                <!-- <div v-if="item.classType==='1'" class="course-status">
                    <span class="number">
                        <em>{{item.payNumber}}</em>/{{item.quotaMax}}
                    </span>
                    <span class="course-rest">
                        {{item.quotaMin}}人报名可开班
                    </span>
                    <span class="money">
                        <em>最低价</em> ￥{{ item.lowestPrice | formatNumber(2)}}
                    </span>
                </div> -->
                
            </div>
        </div>
        <div class="course-status">
            <span class="money">
                <i>￥</i>{{ item.studyingFee | formatDatas}}
            </span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'course-no-head',
  props:['item','hasAddress','campusDetail'],
  components: {
  },
  data: function () {
    return {
      title: '提示',
    }
  },
  methods: {
    handleLocation () {
      let item = this.campusDetail
      this.$router.push('/location?location=' + JSON.stringify({
        campusId: item.campusId,
        campusName: item.campusName,
        address: item.address.replace('&', ' '),
        geoLocation: item.geoLocation,
        province: item.province,
        city: item.city,
        district: item.district,
        distance: item.distance
      }))
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@images:"../../assets/img";
.course-no-head{
    /*height: 23rem;*/
    /* padding-top: 3rem; */
    position: relative;
    background: white;  
    /* border-bottom: 2px solid #f2f2f2; */
    /* display: flex;
    display: -webkit-flex; */
}
.course-of-on-head{
    padding: 0 2.5rem 0 2.5rem;
}
.course-div{
    display: inline-block;
    font-size: 2.4rem;
    color: #646464;
    width: 100%
}
.course-div.detail{
    flex: 1;
    -webkit-box-flex: 1;
}
.course-div.head{
    width: 20rem;
    text-align: center;
    position: relative;
}
.course-div.head .headImg{
    width: 12rem;
    height: 12rem;
    border-radius: 12rem;
    border: 2px solid #eee;
    /*margin-left: 3rem;*/
}
.course-div.head .diamond{
    position: absolute;
    top: 10rem;
    right: 4rem;
    width: 3.2rem;
}
.zhongchou{
    position: absolute;
    top: 0;
    right: 3rem;
    width: 5.2rem;
}
.course-title{
    /* font-size: 2.8rem; */
    /* line-height: 2.8rem; */
    /* height: 2.8rem; */
    color: #333333;
    margin-bottom: 1.8rem;
    width: 100%;
    line-height: 3.8rem;
}
.course-title .class-name{
    font-size: 3.6rem;
}
.course-title span{
    display: inline-block;
    /* max-width: 30rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
}
.course-title .course-tag{
    width: 6.8rem;
    height: 4rem;
    line-height: 3.4rem;
    font-size: 2.4rem;
    color: #fff;
    text-align: center;
    background: url('@{images}/home/grade.png') no-repeat;
    background-size: 100%;
    float: left;
    margin-right: .5rem;
    margin-top: .2rem;
}
.course-title em{
    color: #ff6600;
    font-size: 2.8rem;
    /* line-height: 2.8rem; */
    vertical-align: top;
    margin-left: 1rem;
}
.course-mes{
    font-size: 2.4rem;
    line-height: 2.4rem;
    height: 2.4rem;
    margin-top: 1.8rem;
    position: relative;
}
.course-mes .course-sitiation{
    float: right;
}
.course-mes span{
    vertical-align: top;
    /* position: relative;
    top: .2rem; */
    margin-left: .6rem;
}
.course-mes .location-detail{
    /* position: absolute;
    right: 0; */
    color: #3271f1;
}
.course-mes .location-detail span {
  text-decoration-line: underline;
  font-size: 2.4rem;
  margin-left: 0;
}
.course-mes img{
    width: 2.4rem;
}
.course-status{
    margin-top: 2.5rem;
    height: 7rem;
    line-height: 7rem;
    border-top: 2px solid #f2f2f2;
    padding-right: 2.5rem;
}
.course-status .number em{
    color: #ff6600;
}
.course-status .course-rest{
    margin-left: 2rem;
}
.course-status .money{
    color: #ff544c;
    font-size: 4.8rem;
    float: right;
    clear: both;
    position: relative;
    /*right: 3rem;*/
    font-weight: bold;
    i{
        font-size:2.8rem;
        font-style:normal;
    }
}
.money em{
    color: #999999;
}
.season{
    /* background: #ff7700; */
    color: #333 !important;
    border-radius: .8rem !important;
    font-size: 3rem !important;
    padding: 0 .4rem !important;
}
</style>
